import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound, permanentRedirect } from 'next/navigation';
import { HistoryChart } from '@/components/benchmarks/leaderboard';
import { FrontierChart, GroupPicker, Leaderboard2 } from '@/components/benchmarks/leaderboard2';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { ComparabilityLegend } from '@/components/entity/model-blocks';
import { TerminalLayout } from '@/components/layout/terminal';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { TrustBadge } from '@/components/models/badges';
import { fmtScoreUnit, TRUST_LONG } from '@/components/models/shared';
import { EntityBadge, StatusBadge } from '@/components/ui/badges';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { KeyValue, type KVRow } from '@/components/ui/key-value';
import { Container, Note } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { api, ApiError, apiD1, safe } from '@/lib/api';
import { cn } from '@/lib/cn';
import { fmtAgo, fmtDate, fmtInt, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { BenchmarkDetail, Group } from '@/lib/types';

/*
  Benchmark leaderboard page 2.0 — TerminalLayout: filters (comparability group · trust · organization · comparable-only) ·
  main (variant navigation, frontier over time, one-row-per-model leaderboard) · inspector (definition with evidence, trust mix, links).
*/

type SP = Record<string, string | undefined>;
type Params = { params: Promise<{ slug: string }>; searchParams: Promise<SP> };
const LIMIT = 100;
export const revalidate = 300;

async function loadBenchmark(slug: string): Promise<BenchmarkDetail> {
  try {
    const d = await apiD1.benchmark(slug);
    if (d.entity_type !== 'benchmark') notFound();
    return d;
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const d = await safe(apiD1.benchmark(slug));
  if (!d || d.entity_type !== 'benchmark' || d.slug !== slug) return { title: 'Benchmark', robots: { index: false } };
  const title = `${d.name} Leaderboard & Results`;
  const leader = d.leaderboard?.[0];
  const description = `${d.name}${d.category ? ` (${d.category})` : ''}: ${fmtInt(d.result_count ?? 0)} current results across ${fmtInt(d.model_count ?? 0)} canonical models, metric ${d.metric ?? '—'}${leader ? `; current recorded leader ${leader.model.name} at ${fmtScoreUnit(leader.score, leader.unit)} (${leader.trust_label})` : ''}. Comparability groups, trust levels, frontier over time and per-model history on ${SITE_NAME}.`.slice(0, 300);
  const canonical = routes.benchmark(d.slug);
  return { title, description, alternates: { canonical }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${canonical}`, type: 'article', siteName: SITE_NAME }, twitter: { card: 'summary_large_image', title, description } };
}

export default async function BenchmarkPage({ params, searchParams }: Params) {
  const { slug } = await params;
  const sp = await searchParams;
  const d = await loadBenchmark(slug);
  if (d.slug !== slug) permanentRedirect(routes.benchmark(d.slug));
  const canonical = routes.benchmark(d.slug);
  // Group from `?group=metric|config_key` (select form) or `?metric=&config_key=` (links).
  let metric = sp.metric?.trim() || undefined;
  let configKey = sp.config_key?.trim() || undefined;
  if (sp.group?.includes('|')) [metric, configKey] = sp.group.split('|') as [string, string];
  const trust = sp.trust?.trim() || undefined;
  const org = sp.org?.trim() || undefined;
  const comparableOnly = sp.comparable_only === '1';
  const offset = Math.max(0, Number(sp.offset) || 0);
  const model = sp.model?.trim() || undefined;
  const [lb, frontier, list, history] = await Promise.all([
    safe(apiD1.leaderboard(d.slug, { metric, config_key: configKey, trust, org, comparable_only: comparableOnly ? 1 : undefined, limit: LIMIT, offset })),
    safe(apiD1.frontier(d.slug, { metric, config_key: configKey })),
    safe(apiD1.benchmarks()),
    model ? safe(api.benchmarkHistory(d.slug, model)) : Promise.resolve(null),
  ]);
  const group: Group | null = lb?.group ?? d.primary_group ?? null;
  const groups = lb?.groups ?? d.groups ?? [];
  const a = d.attributes ?? {};
  const unit = typeof a.unit === 'string' ? a.unit : (lb?.items[0]?.unit ?? null);
  const item = list?.items.find((b) => b.slug === d.slug) ?? null;
  const siblings = list?.items.filter((b) => (b.family ?? b.slug) === (d.family ?? item?.family ?? d.slug)).sort((x, y) => Number(!!y.attributes?.family_head) - Number(!!x.attributes?.family_head) || (num(y.result_count) ?? 0) - (num(x.result_count) ?? 0)) ?? [];
  const cur: SP = { metric, config_key: configKey, trust, org, comparable_only: comparableOnly ? '1' : undefined, model };
  const href = (patch: SP) => {
    const p = new URLSearchParams();
    for (const [k, v] of Object.entries({ ...cur, ...patch })) if (v) p.set(k, v);
    const s = p.toString();
    return `${canonical}${s ? `?${s}` : ''}`;
  };
  const link = (k: string) => (typeof a[k] === 'string' && /^https?:\/\//.test(a[k] as string) ? (a[k] as string) : null);
  const site = link('website') ?? link('official_url');
  const defRows: KVRow[] = [
    { key: 'task', raw: a.task },
    { key: 'metric', raw: a.metric_label ?? a.metric, value: typeof (a.metric_label ?? a.metric) === 'string' ? <span>{String(a.metric_label ?? a.metric)}{unit && <span className="text-ink-3"> · {unit}</span>}{a.higher_is_better === false ? <span className="text-ink-3"> · lower is better</span> : ''}</span> : undefined },
    { key: 'metric_min', label: 'Metric range', raw: num(a.metric_min) !== null && num(a.metric_max) !== null ? `${a.metric_min} – ${a.metric_max}` : undefined },
    { key: 'variant', raw: a.variant },
    { key: 'version', raw: a.version },
    { key: 'harness', raw: a.harness },
    { key: 'comparability_note', label: 'Comparability note', raw: a.comparability_note },
    { key: 'known_limitations', raw: a.known_limitations },
    { key: 'paper', raw: a.paper },
    { key: 'paper_url', raw: a.paper_url },
    { key: 'website', raw: a.website },
    { key: 'creator', raw: a.creator },
  ];
  const trustMix = lb?.group?.trust_mix ?? d.trust_mix ?? item?.trust_mix ?? {};
  const filterCount = [trust, org, comparableOnly ? '1' : undefined, configKey].filter(Boolean).length;
  const ld = { '@context': 'https://schema.org', '@type': 'Dataset', name: `${d.name} leaderboard`, url: `${SITE_URL}${canonical}`, description: d.description ?? (typeof a.task === 'string' ? a.task : undefined), alternateName: d.aliases?.length ? d.aliases : undefined, measurementTechnique: typeof a.metric === 'string' ? a.metric : undefined, sameAs: [site, link('paper')].filter(Boolean), variableMeasured: typeof a.metric === 'string' ? a.metric : undefined };
  const empty = (num(d.result_count) ?? 0) === 0;

  const filters = (
    <div className="space-y-5 pb-6 text-sm" data-leaderboard-filters>
      <div>
        <p className="eyebrow mb-1">Comparability group</p>
        <GroupPicker groups={groups} active={group} makeHref={(g) => href({ metric: g.metric, config_key: g.config_key, offset: undefined })} slug={d.slug} hidden={{ trust, org, comparable_only: cur.comparable_only }} />
      </div>
      {Object.keys(trustMix).length > 0 && (
        <div>
          <p className="eyebrow mb-1">Trust level</p>
          <ul className="space-y-px">
            <li>
              <Link href={href({ trust: undefined, offset: undefined })} className={cn('flex min-h-8 items-center justify-between px-1 text-[13px] hover:bg-surface-2', !trust ? 'bg-surface-2 font-medium text-ink' : 'text-ink-2')} aria-current={!trust ? 'true' : undefined}>
                <span>All</span>
                <span className="tnum text-xs text-ink-3">{fmtInt(Object.values(trustMix).reduce((n, v) => n + v, 0))}</span>
              </Link>
            </li>
            {Object.entries(trustMix)
              .sort((x, y) => y[1] - x[1])
              .map(([k, n]) => (
                <li key={k}>
                  <Link href={href({ trust: trust === k ? undefined : k, offset: undefined })} className={cn('flex min-h-8 items-center justify-between gap-2 px-1 text-[13px] hover:bg-surface-2', trust === k ? 'bg-surface-2 font-medium text-ink' : 'text-ink-2')} aria-current={trust === k ? 'true' : undefined} title={TRUST_LONG[k] ?? k}>
                    <TrustBadge level={k} />
                    <span className="tnum text-xs text-ink-3">{fmtInt(n)}</span>
                  </Link>
                </li>
              ))}
          </ul>
        </div>
      )}
      <form action={canonical} method="get" className="space-y-3">
        {metric && <input type="hidden" name="metric" value={metric} />}
        {configKey && <input type="hidden" name="config_key" value={configKey} />}
        {trust && <input type="hidden" name="trust" value={trust} />}
        <label className="block">
          <span className="eyebrow block pb-1">Organization slug</span>
          <input name="org" defaultValue={org ?? ''} placeholder="anthropic, openai…" className="h-9 w-full border border-rule bg-surface px-2 text-[13px] text-ink focus:border-accent focus:outline-none" />
        </label>
        <label className="flex min-h-9 items-center gap-2 text-[13px] text-ink-2">
          <input type="checkbox" name="comparable_only" value="1" defaultChecked={comparableOnly} className="size-4 accent-[var(--accent)]" /> Comparable rows only
        </label>
        <div className="flex gap-2">
          <button type="submit" className="inline-flex h-9 flex-1 items-center justify-center bg-ink px-3 text-[13px] font-medium text-canvas hover:opacity-90">
            Apply
          </button>
          <Link href={canonical} className="inline-flex h-9 items-center border border-rule px-3 text-[13px] text-ink-2 hover:text-ink">
            Reset
          </Link>
        </div>
      </form>
      <div>
        <p className="eyebrow mb-1">Views</p>
        <ul className="space-y-px text-[13px]">
          <li>
            <Link href={`${canonical}/cost-vs-performance${group ? `?metric=${encodeURIComponent(group.metric)}&config_key=${encodeURIComponent(group.config_key)}` : ''}`} className="flex min-h-8 items-center px-1 text-ink-2 hover:bg-surface-2 hover:text-ink">
              Cost vs performance →
            </Link>
          </li>
          <li>
            <Link href={`/benchmarks/matrix?benchmarks=${encodeURIComponent(d.slug)}`} className="flex min-h-8 items-center px-1 text-ink-2 hover:bg-surface-2 hover:text-ink">
              In the matrix →
            </Link>
          </li>
          <li>
            <Link href={`${routes.timeline({ entity: d.slug })}`} className="flex min-h-8 items-center px-1 text-ink-2 hover:bg-surface-2 hover:text-ink">
              Timeline →
            </Link>
          </li>
        </ul>
      </div>
    </div>
  );

  const inspector = (
    <div className="space-y-5 text-sm" data-benchmark-definition>
      <div>
        <KeyValue rows={defRows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: 'benchmark' }} dense />
      </div>
      {group && (
        <div>
          <p className="eyebrow mb-1">Active group</p>
          <p className="text-[13px] text-ink">{group.label}</p>
          <p className="tnum text-xs text-ink-3">
            {fmtInt(group.model_count)} models · {fmtInt(group.n)} current rows
          </p>
        </div>
      )}
      <div>
        <p className="eyebrow mb-1">Comparability</p>
        <ComparabilityLegend />
      </div>
      {d.aliases?.length > 0 && (
        <div>
          <p className="eyebrow mb-1">Also known as</p>
          <p className="text-xs text-ink-2">{d.aliases.join(', ')}</p>
        </div>
      )}
      <p className="mono break-all text-[11px] text-ink-3">
        slug {d.slug} · {d.id}
      </p>
      {lb?.methodology && <Note>{lb.methodology}</Note>}
    </div>
  );

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <ViewBeacon path={canonical} />
      <Container wide>
        <nav aria-label="Breadcrumb" className="pt-5 text-xs text-ink-3">
          <ol className="flex flex-wrap items-center gap-1.5">
            <li>
              <Link href="/" className="hover:text-ink">
                AI Atlas
              </Link>
            </li>
            <li aria-hidden>/</li>
            <li>
              <Link href={routes.benchmarks()} className="hover:text-ink">
                Benchmarks
              </Link>
            </li>
            {d.category && (
              <>
                <li aria-hidden>/</li>
                <li>
                  <Link href={`/benchmarks?category=${encodeURIComponent(d.category)}`} className="hover:text-ink">
                    {d.category}
                  </Link>
                </li>
              </>
            )}
            <li aria-hidden>/</li>
            <li className="text-ink-2">{d.name}</li>
          </ol>
        </nav>
        <header className="pb-4 pt-4 md:pt-5">
          <div className="flex flex-wrap items-center gap-2">
            <EntityBadge type="benchmark" />
            <StatusBadge status={d.status} />
            {d.category && <span className="text-xs text-ink-3">category · {d.category}</span>}
            {d.family && d.variant && (
              <span className="text-xs text-ink-3">
                family · {d.family} · variant {d.variant}
              </span>
            )}
          </div>
          <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div className="min-w-0">
              <h1 className="display text-[30px] md:text-[44px]">{d.name}</h1>
              <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[15px] text-ink-2">
                {typeof a.creator === 'string' && <span className="font-medium text-ink">{a.creator}</span>}
                {site && (
                  <a href={site} target="_blank" rel="noopener noreferrer" className="inline-flex max-w-full min-w-0 items-center gap-1 text-ink-3 hover:text-accent">
                    <span className="truncate">{site.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '').slice(0, 48)}</span> <ExternalLink className="size-3.5 shrink-0" aria-hidden />
                  </a>
                )}
              </p>
              {(d.description || typeof a.task === 'string') && <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-ink-2">{d.description ?? (a.task as string)}</p>}
            </div>
            <div className="shrink-0 text-xs text-ink-3 lg:text-right">
              <QualityMark q={d.quality?.score} label />
              <p className="mt-1" title={d.updated_at}>
                Updated {fmtAgo(d.updated_at)} · first seen {fmtDate(d.first_seen_at)}
              </p>
            </div>
          </div>
          <dl className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 border-y border-rule py-3 sm:grid-cols-4" data-benchmark-strip>
            <div>
              <dt className="eyebrow">Metric</dt>
              <dd className="mt-0.5 truncate text-[15px] font-medium text-ink">
                {d.metric ?? '—'}
                {unit && <span className="text-ink-3"> · {unit}</span>} <span className="text-ink-3">{d.direction === 'lower' ? '↓' : '↑'}</span>
              </dd>
            </div>
            <div>
              <dt className="eyebrow">Current results</dt>
              <dd className="tnum mt-0.5 text-[15px] font-medium text-ink">{fmtInt(d.result_count ?? 0)}</dd>
            </div>
            <div>
              <dt className="eyebrow">Models</dt>
              <dd className="tnum mt-0.5 text-[15px] font-medium text-ink">{fmtInt(d.model_count ?? 0)}</dd>
            </div>
            <div>
              <dt className="eyebrow">Current leader</dt>
              <dd className="mt-0.5 truncate text-[15px] font-medium text-ink">
                {lb?.items[0] && offset === 0 ? (
                  <>
                    <EntityLink e={{ ...lb.items[0].model, entity_type: 'model' }} /> <span className="tnum text-ink-2">{fmtScoreUnit(lb.items[0].score, unit)}</span>
                  </>
                ) : item?.leader ? (
                  <>
                    <EntityLink e={{ ...item.leader.model, entity_type: 'model' }} /> <span className="tnum text-ink-2">{fmtScoreUnit(item.leader.score, unit)}</span>
                  </>
                ) : (
                  <span className="text-ink-3">—</span>
                )}
              </dd>
            </div>
          </dl>
          {siblings.length > 1 && (
            <nav aria-label="Variants" className="no-scrollbar -mx-4 mt-3 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0" data-variant-nav>
              <span className="eyebrow mr-1 flex items-center">Variants</span>
              {siblings.map((s) => (
                <Link key={s.slug} href={routes.benchmark(s.slug)} aria-current={s.slug === d.slug ? 'page' : undefined} className={cn('inline-flex h-8 items-center gap-1.5 border px-2.5 text-xs whitespace-nowrap', s.slug === d.slug ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink')}>
                  {s.variant ?? s.name}
                  {s.attributes?.family_head ? <span className="opacity-70">· head</span> : null}
                  <span className="tnum opacity-70">{fmtInt(s.result_count)}</span>
                </Link>
              ))}
            </nav>
          )}
        </header>
      </Container>

      <TerminalLayout filters={filters} filterCount={filterCount} inspector={inspector} inspectorTitle="Definition" storageKey="aia-leaderboard-inspector">
        <div className="space-y-8 pb-16">
          {empty && (
            <p className="border-l-2 border-warning bg-warning-soft/40 px-3 py-2 text-xs text-ink-2" data-honesty>
              No results recorded for this benchmark yet — its sources are being connected. The definition, aliases and variants are kept so links resolve; nothing is fabricated.
            </p>
          )}
          {model && (
            <section>
              {history ? <HistoryChart items={history.items} model={model} unit={unit} /> : <Unavailable what="Result history" compact />}
              <p className="mt-2 text-xs">
                <Link href={href({ model: undefined })} className="link">
                  Back to the leaderboard
                </Link>
              </p>
            </section>
          )}
          {!empty && (
            <section>
              <p className="eyebrow mb-2">
                Frontier over time {group && <span className="text-ink-3">· {group.label}</span>}
              </p>
              <FrontierChart frontier={frontier} group={group} unit={unit} />
            </section>
          )}
          <section>
            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
              <p className="eyebrow">
                Leaderboard {lb && <span className="tnum text-ink-3">{fmtInt(lb.total)} models{trust ? ` · trust ${trust}` : ''}{org ? ` · org ${org}` : ''}{comparableOnly ? ' · comparable only' : ''}</span>}
              </p>
              <p className="text-xs text-ink-3">
                Select models with <span className="mono">+</span>, then <Link href={routes.compare()} className="link">Compare</Link>.
              </p>
            </div>
            {!lb ? <Unavailable what="Leaderboard" /> : <Leaderboard2 rows={lb.items} group={group} total={lb.total} limit={LIMIT} offset={offset} unit={unit} activeModel={model} makeHref={(o) => href({ offset: o ? String(o) : undefined })} historyHref={(s) => href({ model: model === s ? undefined : s })} />}
          </section>
        </div>
      </TerminalLayout>
      <CompareTrayBar />
    </>
  );
}